<template>
  <div>
    <editor
      ref="editor"
      v-model="text"
      :tinymce-script-src="tinymceScriptSrc"
      api-key="o98p7xmc259ytmjwys4bb48fbeixh7yxxmo0cyp1x809hldy"
      :init="init"
    />
    <el-button @click="submit">submit</el-button>
    <el-button @click="exportword">export</el-button>
    <div id="export" ref="content" />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
// eslint-disable-next-line no-unused-vars
import { saveFile } from '@/api/file'
// eslint-disable-next-line no-unused-vars
import txClient from '@/plugins/txOss'
import $ from 'jquery'
import '@/vendor/jquery.wordexport'
export default {
  name: 'mark3',
  components: {
    Editor
  },
  data() {
    return {
      init: {
        height: 500,
        min_height: 400,
        language: 'zh_CN',
        language_url: 'https://cdn.jsdelivr.net/npm/tinymce-lang@0.0.1/langs/zh_CN.js',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize ',
        toolbar: `code undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent |
                     styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |
                     table image charmap emoticons hr insertdatetime | fullscreen `,
        toolbar_mode: 'wrap',
        images_upload_handler: this.imageUpload,
        max_height: window.innerHeight - 200
      },
      tinymceScriptSrc: 'https://cdn.jsdelivr.net/npm/tinymce@5.4.2/tinymce.min.js',
      text: '123'
    }
  },
  methods: {
    submit() {
      console.log(this.text)
      this.$refs.content.innerHTML = this.text
    },
    exportword() {
      $('#export').wordExport('table')
    },
    imageUpload(blobInfo, succFun, failFun) {
      // upload img 上传文件到cos
      // transfer to blob
      // const file = blobInfo.blob()
      // const objectName = (new Date().getTime() + Math.floor(Math.random() * 10000) + '').split('').reverse().join('') + '.' + file.name.split('.').pop()
      // txClient.putObject({
      //   Bucket: process.env.VUE_APP_TX_BUCKET1,
      //   Region: process.env.VUE_APP_TX_REGION1,
      //   Key: objectName,
      //   Body: file
      // }, (err, data) => {
      //   console.log(err, data)
      //   if (err) {
      //     failFun(err)
      //     console.log(err)
      //   }
      // })
      // 上传文件到后台
      // const file = blobInfo.blob()
      // const forms = new FormData()
      // forms.append('file', file)
      // saveFile(forms).then(res => {
      //   succFun(process.env.VUE_APP_BACKSTAGE + process.env.VUE_APP_BASE_URL + '/local/download/toho2.jpg')
      // })
      // todo 文件回显需要专门的服务器或者接口
      // succFun(process.env.VUE_APP_BACKSTAGE + process.env.VUE_APP_BASE_URL + '/local/download')
    },
    getImg(objName) {
      console.log(objName)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
